
<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-link>返回</el-link>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>内容类型管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增内容类型</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <el-row class="row">
    <el-col :span="24">
      <el-form :model="content" label-width="auto" style="max-width: 600px">
        <el-form-item label="选择类别">
          <el-button @click="showChooseParentWin" type="success">{{currentCatName}}</el-button>
        </el-form-item>
        <el-form-item label="超链接">
          <el-input v-model="content.url" />
        </el-form-item>
        <el-form-item label="文本1">
          <el-input v-model="content.text1" />
        </el-form-item>
        <el-form-item label="文本2">
          <el-input v-model="content.text2" />
        </el-form-item>
        <el-form-item label="文本3">
          <el-input type="textarea" v-model="content.text3" />
        </el-form-item>
        <el-form-item label="图片1">
          <el-upload
              class="avatar-uploader"
              :action="uploadImageUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              name="uploadFile"
          >
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片1">
          <el-upload
              class="avatar-uploader"
              :action="uploadImageUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              name="uploadFile"
          >
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="超链接">
          <el-button type="primary" @click="doSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>



  <!-- 选择内容类别 -->
  <el-dialog
      v-model="chooseParentDialog"
      title="选择内容类别"
      width="500"

  >
    <el-tree
        :data="cats"
        :props="defaultProps"
        @node-click="chooseParent"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chooseParentDialog = false">取消</el-button>
        <el-button type="primary" @click="doChooseParentCatOk">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {useRouter} from 'vue-router'
import contentRequest from '../../api/content.js';
import contentCategoryRequest from '../../api/contentCategory.js';
import { ElMessage } from 'element-plus'
import {ref, onMounted, reactive} from 'vue';
let router = useRouter();
// 属性----------------
// 表单相关属性
let content = reactive({});

// 选择内容类别的弹窗相关属性
// 搜索表单中选择类别的相关属性
let chooseParentDialog = ref(false);
let currentCat = undefined;// 记录当前选择的父类目对象
const defaultProps = {
  children: 'children',
  label: 'catName',
}
let currentCatName = ref('选择类别');
let cats = [];
// 图片上传的相关属性
let uploadImageUrl = ref("http://localhost:8080/upload");
const imageUrl1 = ref('')
const imageUrl2 = ref('')

// 函数-------------------
// 图片上传相关函数
function handleAvatarSuccess1(res){
  console.log(res);
  imageUrl1.value = res.msg;
}
function handleAvatarSuccess2(res){
  console.log(res);
  imageUrl2.value = res.msg;
}


//  选择内容类别相关的函数
/**
 * 显示选择父类型的窗体
 */
function showChooseParentWin(){
  chooseParentDialog.value = true;
}
/**
 * 加载所有的内容类型，结果是一个树结构
 * @returns {Promise<void>}
 */
async function loadCats(){
  contentCategoryRequest.queryAll(res=>{
    console.log(res)
    cats = res.data;
  })
}
/**
 * 树节点的单击事件
 * @param data 这个节点上的数据
 */
function chooseParent(data){
  // 立刻记录当前选择的节点
  currentCat = data;
}

/**
 * 选择父类目弹窗的确定按钮
 */
function doChooseParentCatOk(){
  // 将按钮文本修改为 当前选择的父类别名称
  if(currentCat)
    currentCatName.value = currentCat.catName;
  // 关闭窗体
  chooseParentDialog.value = false;
}

/**
 * 提交表单的事件
 */
function doSubmit(){
  // 准备数据
  if(currentCat){// 内容类别
    content.catId = currentCat.catId;
  }else{
    ElMessage({
      type:"error",
      message:"请选择一个类别"
    });
    return;
  }
  // 图片地址
  if(imageUrl1.value){
    content.img1 = imageUrl1.value;
  }
  if(imageUrl2.value){
    content.img2 = imageUrl2.value;
  }
  // 提交数据
  contentRequest.save(content,res=>{
    if(res.code == '200'){
      ElMessage({
        type:"success",
        message:"添加内容成功"
      });
      router.back();
    }else{
      ElMessage({
        type:"error",
        message:"添加内容失败"
      });
    }
  })
}


onMounted(()=>{
  loadCats();
})
</script>


<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>